<template>
  <view class="index">
    <sp-html2canvas-render
      domId="render-dom"
      ref="renderRef"
      @renderOver="renderOver"
    ></sp-html2canvas-render>
    <!-- 主渲染内容 -->
    <view id="render-dom" class="render-content">
      
	  <view class="container"  >
	  
	  
	  <h-title title="画面分析结果(请截图保存,退出后将看不到此次结果)" color="#63065f" more-show="false"></h-title>
	      <zero-markdown-view :themeColor="'#63065f'" :markdown="example2"></zero-markdown-view>
	  </view>
    </view>
    <!-- 导出按钮自定义 -->
    <button @click="cusRenderDom">导出</button>
	
	<image class="screen-shot-img" :src="screenShotUrl" @click="previewImg(screenShotUrl)"></image>
	
	
  </view>
</template>

<script>
export default {
  data() {
    return {
		screenShotUrl:'',
		example2:`# 房树人测验心理分析\n从这张房树人测验的图片描述中，我们可以进行如下心理分析：\n\n## 1. **光秃秃的大树**\n通常代表个体的成长历程和自我形象。这棵树没有叶子，可能暗示着个体感到生命力的枯竭、缺乏活力或者处于一种消极的情绪状态。树枝向右弯曲成弧形，可能表示个体对外界的依赖或对他人影响的敏感性，也可能反映了内心的压抑或逃避倾向。\n\n## 2. **简陋破旧的房子**\n房子通常代表个体的内心世界和安全感。破损的屋顶和裂缝的墙壁可能象征着个体心理防御机制的脆弱或存在严重的心理创伤。房子在画面的边缘，可能意味着个体感觉自己与外界隔离，或者在心理上与外部世界保持距离。\n\n## 3. **两个人物**\n人物可能代表被测试者本人或其他重要的人物。一个穿裙子的人可能代表女性特质或柔弱的部分，而另一个未穿衣服的人可能反映了个体的原始自我或对自我暴露的恐惧。他们共同注视前方，可能表明个体对未知的焦虑或期待。\n\n## 4. **荒凉孤独的场景**\n整体画面的氛围可能反映了被测试者的内心感受，即孤独、无助，或者对生活环境的不满。这种情绪状态可能源于过去的负面经历，如家庭问题、社会压力或个人挫折。\n\n## 综合分析\n综合这些元素，被测试者可能有以下特点：\n- 经历过创伤或困难\n- 内心感到孤独和无助\n- 防御机制薄弱\n- 可能有一定程度的自我否定或自我价值感低下\n他们可能在寻求连接和理解，同时又害怕暴露真实的自我。\n\n## 建议\n建议专业心理咨询师进一步探索这些主题，以帮助个体处理潜在的心理问题并建立更健康的应对策略。`,
		personaltyCard:`
		### part 1: 人物属性
		你是一位内心深邃、追求和谐与自由的灵魂行者，既是一位坚韧不拔的探险家，也是自己心灵港湾的守护者。
		
		### part 2: 你的优势
		你具备独立自主的个性，不受传统束缚，对生活充满热情与好奇心。在职业生涯中，你可能擅长创意设计、心理咨询或自然环境保护等领域，能够出色地处理需要深度思考、情感共鸣与创造力的工作。你善于从自然与内心世界汲取力量，使你在面对挑战时展现出非凡的韧性和生命力。
		
		### part 3: 小tips
		在你追求心灵的平静与外界的探险之间，可能存在隐藏的脆弱与对私密性的过度需求，这可能偶尔会限制你与他人建立更深层次的联系。尝试更加开放自己，允许他人走进你的世界，分享你的梦想与挑战，可能会发现新的支持与共鸣。同时，记得平衡对未知的探索与内心安宁的需求，适时的自我反思能帮助你更好地理解自己的内在动机，促进个人的全面成长。
		`,
    }
  },
  methods: {
    renderOver(e) {
      // e为导出截图的base64格式文件
      console.log('==== renderOver :', e)
	  this.screenShotUrl = e;
	  this.previewImg(this.screenShotUrl)
    },
    cusRenderDom() {
      // 调用组件实例中h2cRenderDom方法
      this.$refs.renderRef.h2cRenderDom()
    },
	//预览生成的海报图片
	previewImg(url) {
	    if (!url) return
		
	    uni.previewImage({
	        urls: [url],
			longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
	    })
	}
  }
}

</script>